CSSで自由にホームページをレイアウトする
前回に引き続き、今回も「float」と「width」のスタイルシートを活用する方法を紹介します。今回の講座では、『3段組のページを作成する方法』、および『自由にホームページをレイアウトする方法』を紹介します。ぜひ参考にしてみてください。 サンプルページ

→ 3段組のページを作成する
 
3段組のページを作成する場合は、各段(DIVタグ)に「float:left」のスタイルシートを指定し、左から順に各段を回り込みで配置していきます。たとえば、左の段のDIVタグのクラス名を"left"、中と右の段のDIVタグのクラス名を"right"とした場合、以下のようにスタイルシート記述すると3段組のホームページを実現できます。

・左の段のDIVタグ
 回り込みが左、横幅28%、左余白5%(ページ左側の余白)

・中と右の段のDIVタグ
 回り込みが左、横幅28%、左余白3%(段と段の間隔)

DIV.left{
float:left;
width:28%;
padding-left:5%;
font-family:monospace;
line-height:1.5;
}
DIV.right{
float:left;
width:28%;
padding-left:3%;
font-family:monospace;
line-height:1.5;
}
サンプルページ


→ 自由にホームページをレイアウトする方法
 
「float」と「width」のスタイルシートで回り込みを指定すると、その左右に余裕がある限り、回り込みが継続されます。この回り込みを強制的に解除する場合は、clear属性を追加してBRタグを記述します。clear属性の値には、回り込みを解除する方向を"left"または"right"で指定します。また、"all"で両方の回り込みを解除することも可能です。以下は、2段組を途中で強制終了し、1段組に戻した例です。このように、「float」と「width」のスタイルシート、およびclear属性を組み合わせると、自由にホームページをレイアウトできるようになります。

(参考:各DIVタグに指定したスタイルシートの内容)
・左の段のDIVタグ
 回り込みが左、横幅35%、左余白5%(ページ左側の余白)

・右の段のDIVタグ
 回り込みが左、横幅52%、左余白3%(段と段の間隔)

・下の段のDIVタグ
 回り込みの指定なし、横幅90%、左余白5%(ページ左側の余白)

…………が落ちるときに、おれの袷の片袖がもげて、急に手が自由になった。その晩母が山城屋
に詫びに行ったついでに袷の片袖も取り返して来た。<BR>
</DIV>
<BR clear="left">
<BR><BR>
<DIV class="under">
  この外いたずらは大分やった。大工の兼公と肴屋の角をつれて、茂作の人参畠をあらした事が
ある。人参の芽が出揃わぬ処へ藁が一面に敷いてあったから、その上で…………
サンプルページ


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze